<template>
  <view class="dish-card" @tap="handleClick">
    <view class="dish-image">
      <image :src="dish.image" mode="aspectFill" />
      <view v-if="dish.tags && dish.tags.length" class="dish-tags">
        <text v-for="tag in dish.tags.slice(0, 2)" :key="tag" class="tag">{{ tag }}</text>
      </view>
    </view>
    <view class="dish-info">
      <text class="dish-name">{{ dish.name }}</text>
      <text class="dish-description">{{ dish.description }}</text>
      <view class="dish-footer">
        <view class="dish-points">
          <text class="points-value">{{ dish.points }}</text>
          <u-icon name="heart-fill" color="#ff6b81" size="14" />
        </view>
        <view class="add-btn" @tap.stop="handleAddToCart">
          <u-icon name="plus-circle-fill" color="#ff6b81" size="24" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useCartStore } from '@/store/modules/cart'

const props = defineProps({
  dish: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click'])
const cartStore = useCartStore()

const handleClick = () => {
  emit('click', props.dish)
}

const handleAddToCart = () => {
  cartStore.addToCart(props.dish)
  uni.showToast({
    title: '已添加到购物车',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.dish-card {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  
  .dish-image {
    position: relative;
    width: 100%;
    height: 200rpx;
    
    image {
      width: 100%;
      height: 100%;
}
    
    .dish-tags {
      position: absolute;
      top: 10rpx;
      left: 10rpx;
      display: flex;
       margin-right: 8rpx; &:last-child { margin-right: 0; }
      
      .tag {
        background: rgba(255, 107, 129, 0.8);
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
}
    }
  }
  
  .dish-info {
    padding: 20rpx;
    
    .dish-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
}
    
    .dish-description {
      font-size: 24rpx;
      color: #666;
      display: block;
      margin-bottom: 16rpx;
      line-height: 1.4;
}
    
    .dish-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .dish-points {
        display: flex;
        align-items: center;
         margin-right: 4rpx; &:last-child { margin-right: 0; }
        
        .points-value {
          font-size: 28rpx;
          font-weight: bold;
          color: #ff6b81;
}
      }
      
      .add-btn {
        padding: 8rpx;
}
    }
  }
}
</style>